<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
            <div>
                <div>{{info.name}}</div>
                <div>{{info.age}}</div>
                <div>{{info.gender}}</div>
            </div>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list: ['apple', 'orange', 'banana'],
                    info: {
                        name: 'link',
                        age: 18
                    }
                }
            });
            Vue.set(app.list, 2, 'lemon');
            app.$set(app.list, 1, 'lemon');
            // app.info.gender = 'male';  这种方式不是响应式的
            app.$set(app.info, 'gender', 'male');
        </script>
    </body>
</html>
